<script setup>

import {useUserStore} from "@/store/user.js";
import dayjs from "dayjs";

const userStore = useUserStore()

// 判断是否是今天的函数
const isToday = (timestamp) => {
  const today = dayjs().startOf('day');
  const messageDay = dayjs(timestamp);
  return today.isSame(messageDay, 'day');
};

// 根据是否是今天来选择不同的格式化方式
const formatMessageDate = (timestamp) => {
  if (isToday(timestamp)) {
    return dayjs(timestamp).format('HH:mm'); // 如果是今天，只显示时分
  } else {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm'); // 如果不是今天，显示完整日期和时分
  }
};
// 打开对应对话框
const toggle = (message) => {
  if (message.user[0]._id === userStore.user._id) {
    // 发送者
    userStore.set_message_list(userStore.user['_id'], message.to_user[0]._id)
    userStore.set_to_user(message.to_user[0])
  } else {
    userStore.set_message_list(message.user[0]._id, userStore.user['_id'])
    userStore.set_to_user(message.user[0])
  }
  userStore.message.user = userStore.user['_id']
  userStore.message.to_user  = userStore.to_user['_id']
  if (message.is_group) {
    userStore.message.is_group = true
    userStore.message.group_name = message.group_name
  } else {
    userStore.message.is_group = false
    userStore.message.group_name = null
  }
  userStore.message.type = 'text'
}
</script>

<template>
  <el-scrollbar>
    <el-menu default-active="1" active-text-color="#409EFF">
      <template v-for="message in userStore.show_message_list">
          <el-menu-item @click="toggle(message)" :index="message._id"
                      style="padding: 0;height: 120px">
          <div class="flex items-center m-2 justify-between">
            <div class="flex p-2">
              <div class="flex justify-center items-center">
                <el-avatar v-if="message.user[0]._id === userStore.user._id" :size="60" :src="message.to_user[0].avatar"/>
                <el-avatar v-else-if="message.to_user[0]._id === userStore.user._id" :size="60"
                           :src="message.user[0].avatar"/>
              </div>
              <div class="flex *:m-1 *:w-full text-[15px] flex-wrap ml-2 items-center *:flex *:items-center">
                <div class="h-10 p-0" v-if="message.is_group">{{ message.group_name }}</div>
                <div class="h-10 p-0" v-else-if="message.user[0]._id === userStore.user._id">{{
                    message.to_user[0].name
                  }}
                </div>
                <div class="h-10 p-0" v-else-if="message.to_user[0]._id === userStore.user._id">{{
                    message.user[0].name
                  }}
                </div>

                <div class="h-5 p-0" v-if="message.type === 'text'">{{ message.title }}</div>
                <div class="h-5 p-0" v-else-if="message.type === 'img'">【图片消息】</div>
                <div class="h-5 p-0" v-else-if="message.type === 'video'">【视频消息】</div>
                <div class="h-5 p-0" v-else></div>
              </div>
            </div>
            <div class="text-[15px] pt-8 p-2">{{ formatMessageDate(message.createdAtTimestamp) }}</div>
          </div>
        </el-menu-item>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<style scoped>
.el-menu-item.is-active {
  color: gray;
  background-color: #EAEEFF !important;
}
</style>